<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02-reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2976530_owr7i341jws.css">
    <link rel="stylesheet" href="./css/userinfo.css">
    <link rel="stylesheet" href="./css/home.css">
    <style>
        
        .box1 {
            width: 100%;
            height: 50px;
            background-color: #e9ccd3;
            box-sizing: border-box;
            min-width: 1200px;
        }

        .box1 ul {
            width: 1000px;
            height: 50px;
            float: right;

        }

        .box1 ul li {
            float: left;
        }

        .box1 ul li a {
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            width: 200px;
            height: 50px;
        }

        .box1 p {
            float: left;
            font-size: 20px;
            line-height: 50px;
            margin-left: 100px;
            min-width: 100px;
        }

        .box1 ul li a:hover {
            background-color: #b598a1;
        }

        .bann {
            width: 100%;
            height: 120px;
            min-width: 1100px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
            background-color: white;
            overflow: hidden;
        }

        .bann .logo {
            width: 100px;
            height: 120px;
            background: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png) no-repeat top center;
            margin-left: 100px;
            float: left;
        }

        .bann .ipt {
            width: 700px;
            height: 120px;
            margin-left: 100px;
            position: relative;
            float: left;
        }

        .bann .ipp {
            float: left;
        }

        .bann .ipt input {
            width: 400px;
            height: 10px;

            padding: 10px;
            font-size: 20px;
            outline: none;
            border: 2px solid red;
            float: left;
        }

        .bann .ipt span.iconfont {
            position: absolute;
            top: 58px;
            left: 380px;
            font-size: 20px;
            cursor: pointer;
        }

        .bann .ipt .so {
            width: 40px;
            height: 34px;
            background-color: red;
            float: left;
            font-size: 20px;
            font-weight: 800;
            text-align: center;
            line-height: 34px;
            color: white;
            cursor: pointer;
        }

        .bann .bright {
            width: 180px;
            height: 30px;
            border: 1px solid #ccc;
            float: left;
            margin-top: 50px;
            margin-left: 20px;
            cursor: pointer;
        }

        .bann .bright .iconfont {
            color: red;
            font-size: 20px;
            margin-top: 6px;
            margin-left: 20px;
            float: left;
        }

        .bann .bright p {
            font-size: 16px;
            color: red;
            float: left;
            margin-left: 20px;
            margin-top: 4px;
        }

        .bann .bright:hover {
            border-color: red;
        }

        .bann .bbott {
            width: 600px;
            height: 30px;
            float: left;
        }

        .bann .bbott ul {
            width: 600px;
            height: 30px;
            float: left;
        }

        .bann .bbott ul li {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .bann .bbott ul li a {
            color: #ccc;
        }

        .bann .bbott ul li:hover a {
            color: red;
        }

        .bann .maxright {
            width: 200px;
            height: 110px;
            float: right;
            background: url(https://img13.360buyimg.com/da/jfs/t1/197524/35/21950/130567/62451d53E976d9cdc/6794459b3cd6fa84.jpg.webp)no-repeat bottom left;
            background-size: 100% 100%;
            margin-right: 200px;
            margin-top: 6px;
            cursor: pointer;
        }

        .bann .ipt .ipp .ipptop {
            width: 60px;
            height: 30px;
            background-color: red;
            margin-top: 20px;
        }

        .bann .ipt .ipp .ipptop a {
            height: 30px;
            line-height: 30px;
            margin-left: 14px;
            color: white;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="./index.html">
            <p>京东</p>
        </a>
        <ul>
            <li><a href="./login.html" class="login">登录</a></li>
            <li><a href="./resgiter.html" class="logup">注册</a></li>
            <li><a href="./mycat.html">我的订单</a></li>
            <li><a href="./list.html">商品列表</a></li>
            <li><a href="./my.html">个人中心</a></li>
        </ul>
    </div>
    <div class="bann">
        <div class="logo">

        </div>
        <div class="ipt">
            <div class="ipp">
                <div class="ipptop">
                    <a>京东</a>
                </div>
                <input type="text">
                <div class="so">
                    <i class="iconfont icon-sousuo"></i>
                </div>
            </div>
            <span class="iconfont icon-xiangji"></span>
            <div class="bright">
                <i class="iconfont icon-gouwuche"></i>
                <p>我的购物车</p>
            </div>
            <div class="bbott">
                <ul>
                    <li><a href="">家具家装节</a></li>
                    <li><a href="">大牌空调</a></li>
                    <li><a href="">9.9绿植</a></li>
                    <li><a href="">京东京造</a></li>
                    <li><a href="">维密</a></li>
                    <li><a href="">oppo手机</a></li>
                </ul>
            </div>
        </div>       
    </div>
    <div style="position: absolute;top: 160px;background-color:white;height: 20px;width: 100%;"></div>
    <div class="container">
        <div class="content clearfix">
          <div class="leftmenu fl">
            <ul>
              <li>
                <a href="my.html">会员信息</a>
              </li>
              <li>
                <a href="my.html">个人资料</a>
              </li>
              <li>
                <a href="editUser.html">修改信息</a>
              </li>
              <li>
                <a href="editPass.html">修改密码</a>
              </li>
              <li>
                <a href="editAvatar.html">上传头像</a>
              </li>
              <li>
                <a href="myMoney.html">我的钱包</a>
              </li>
              <li>
                <a href="myStore.html">我的收藏</a>
              </li>
              <li>
                <a href="myStore.html">我的关注</a>
              </li>
              <li>
                <a href="myStore.html">我的收藏</a>
              </li>
              <li>
                <a href="myStore.html">我的拍卖</a>
              </li>
              <li>
                <a href="myStore.html">我的预约</a>
              </li>
              <li>
                <a href="myStore.html">我的白条</a>
              </li>
            </ul>
          </div>
          <div class="rightcontent fr">
            <table width="500">
              <caption><h2>个人资料</h4></caption>
                <tbody>
                    <tr>
                        <td>用户名：</td>
                        <td>zhangsan </td>
                      </tr>
                      <tr>
                        <td>昵称：</td>
                        <td>zhangsan </td>
                      </tr>
                      <tr>
                        <td>身份：</td>
                        <td>zhangsan </td>
                      </tr>
                      <tr>
                        <td>性别：</td>
                        <td><input type="text"> </td>
                      </tr>
                      <tr>
                        <td>年龄：</td>
                        <td><input type="text"> </td>
                      </tr>
                      <tr>
                        <td></td>
                        <td>
                          <input type="button" value="提交修改">
                        </td>
                      </tr>
                  </tbody>
                </table>
            </table>
          </div>
        </div>
      </div>
      <!-- 内容部分结束 -->
      <!-- 底部 -->
      <div style="background-color: white;width: 100%;height: 40px;"></div>
      <div class="footer clear">
          <div class="footer_c">
              <div class="footer1 clear">
                  <ul>
                      <li>
                          <p>
                              <b class="footer1_pc1"></b>
                              <span>品类齐全，轻松购物</span>
                          </p>
                      </li>
                      <li>
                          <p>
                              <b class="footer1_pc2"></b></b>
                              <span>多仓直发，极速配送</span>
                          </p>
                      </li>
                      <li>
                          <p>
                              <b class="footer1_pc3"></b></b>
                              <span>正品行货，精致服务</span>
                          </p>
                      </li>
                      <li>
                          <p>
                              <b class="footer1_pc4"></b></b>
                              <span>天天低价，长轩无忧</span>
                          </p>
                      </li>
                  </ul>
              </div>
              <div class="footer2 clear">
                  <ul>
                      <li><b>购物指南</b></li>
                      <li><a href="#">购物流程</a></li>
                      <li><a href="#">会员介绍</a></li>
                      <li><a href="#">生活旅行</a></li>
                      <li><a href="#">常见问题</a></li>
                      <li><a href="#">大家电</a></li>
                      <li><a href="#">联系客服</a></li>
                  </ul>
                  <ul>
                      <li><b>配送方式</b></li>
                      <li><a href="#">上门自提</a></li>
                      <li><a href="#">211限时达</a></li>
                      <li><a href="#">配送服务查询</a></li>
                      <li><a href="#">配送费收取标准</a></li>
                      <li><a href="#">海外配送</a></li>
                  </ul>
                  <ul>
                      <li><b>支付方式</b></li>
                      <li><a href="#">货到付款</a></li>
                      <li><a href="#">在线支付</a></li>
                      <li><a href="#">分期付款</a></li>
                      <li><a href="#">公司转账</a></li>
                  </ul>
                  <ul>
                      <li><b>售后服务</b></li>
                      <li><a href="#">售后政策</a></li>
                      <li><a href="#">价格保护</a></li>
                      <li><a href="#">退款说明</a></li>
                      <li><a href="#">返修/退换货</a></li>
                      <li><a href="#">取消订单</a></li>
                  </ul>
                  <ul>
                      <li><b>特殊服务</b></li>
                      <li><a href="#">夺宝岛</a></li>
                      <li><a href="#">DIY装机</a></li>
                      <li><a href="#">延保服务</a></li>
                      <li><a href="#">东京E卡</a></li>
                      <li><a href="#">京东通信</a></li>
                      <li><a href="#">京鱼座智能</a></li>
                  </ul>
                  <ul>
                      <li><b>京东自营覆盖区县</b></li>
                      <p><a href="#">京东已向全国2661个区县提供自营配送服务，支持货到付款POS机刷卡和售后上门服务</a></p>
                      <li class="seeMore"><a href="#">查看详情</a></li>
      
                  </ul>
              </div>
              <div class="footer3 clear">
                  <ul class="clear">
                      <li><a href="#">关于我们</a></li>
                      <li>|</li>
                      <li><a href="#">联系我们</a></li>
                      <li>|</li>
                      <li><a href="#">联系客服</a></li>
                      <li>|</li>
                      <li><a href="#">合作招商</a></li>
                      <li>|</li>
                      <li><a href="#">商家帮助</a></li>
                      <li>|</li>
                      <li><a href="#">营销中心</a></li>
                      <li>|</li>
                      <li><a href="#">手机京东</a></li>
                      <li>|</li>
                      <li><a href="#">友情链接</a></li>
                      <li>|</li>
                      <li><a href="#">销售联盟</a></li>
                      <li>|</li>
                      <li><a href="#">京东社区</a></li>
                      <li>|</li>
                      <li><a href="#">风险监测</a></li>
                      <li>|</li>
                      <li><a href="#">隐私政策</a></li>
                      <li>|</li>
                      <li><a href="#">京东公益</a></li>
                      <li>|</li>
                      <li><a href="#">English Site</a></li>
                      <li>|</li>
                      <li><a href="#">Media & IR</a></li>
                  </ul>
                  <p><a href="">
                      京公网安备1000000088号</a><span>|</span><a>0京ICP备11041704号</a><span>|</span><a>互联网药品信息服务 资格证编号(京)经营性-2014-00081</a><span>|</span><a>新出发京零 字第大120007号</a>
                  </p>
                  <p>
                      <a href="">
                          <a>互联网出版许可证编号新出网证(京)字150号</a><span>|</span><a>出版物经营许可证</a><span>|</span><a>网络文化经营许可证京网文[2020]6112-1201号</a><span>|</span><a>违法和不良信息举报电话: 4006561155</a>
                      </a>
                  </p>
                  <p>
                      <a href="">Global Site</a><span>|</span><a href="">Сайт России</a><span>|</span><a href="">Sitio de España</a><span>|</span><a href="">เว็บไซต์ประเทศไทย</a>
                  </p>
                  <p>
                      <a href="">京东旗下网站:</a><a href="">京东钱包</a><span>|</span><a href="">京东云</a><span>|</span><a href=""></a>网络从业人员违法违规行为举报电话: 4006561 155-3
                  </p>
                  <ul class="clear ul5">
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                  </ul>
              </div>
          </div>
      </div>
</body>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/utils.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script>
    // 判断用户是否登录
var username = getCookie('username')
if(!username){
    layer.msg('非法访问！',{
        icon: 2,
        time: 2000
    }, function(){
        location.href = '登录.html?callback='+location.href
    })
}else{
    // 发送请求获取当前用户信息
    $.ajax({
        url: 'http://localhost:8888/users/info?id='+getCookie('userId'),
        headers: {
            authorization: localStorage.getItem('token') || ''
        }
    }).then(res => {
        console.log(res);
        if(res.code === 1){
            var html = `
                <tr>
                    <td>用户名：</td>
                    <td>${res.info.username} </td>
                </tr>
                <tr>
                    <td>昵称：</td>
                    <td><input type="text" name="nickname" value="${res.info.nickname}" /></td>
                </tr>
                <tr>
                    <td>身份：</td>
                    <td>${res.info.identity} </td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="text" name="gender" value="${res.info.gender}"> </td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="text" name="age" value="${res.info.age}"> </td>
                </tr>
                <tr>  
                    <td></td>
                    <td>
                        <input class="submit" type="button" value="提交修改">
                    </td>
                </tr>
            `
            $('.rightcontent tbody').html(html)
            // ajax成功渲染页面以后，再点击提交
            submit()
        }

    })
}

// 定义提交修改的函数
function submit(){
    $('.submit').click(function(){
        var age = $('[name="age"]').val()
        var gender = $('[name="gender"]').val()
        var nickname = $('[name="nickname"]').val()
        $.ajax({
            url: 'http://localhost:8888/users/update',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                age,
                gender,
                nickname
            }
        }).then(res => {
            // console.log(res);
            if(res.code === 1){
                layer.msg(res.message, {
                    icon: 1,
                    time: 1500
                }, function(){
                    location.href = 'my.html'
                })
            }
        })
    })
}
</script>

</html>